import React, { Component, Fragment } from "react";
import "./aside.scss";
import { Menu } from "antd";
import { UserOutlined } from "@ant-design/icons";
import { Link } from "react-router-dom";
import menuList from "../../config/menuConfig";
const { SubMenu } = Menu;
export default class Aside extends Component {
  constructor(props) {
    super(props);
    this.state = {};
  }
  getMenuList = (menuList) => {
    return menuList.map((item) => {
      if (!item.children) {
        return (
          <Menu.Item key={item.key} icon={<UserOutlined />}>
            <Link to={item.key}>{item.title}</Link>
          </Menu.Item>
        );
      } else {
        return (
          <SubMenu key={item.key} icon={<UserOutlined />} title={item.title}>
            {this.getMenuList(item.children)}
          </SubMenu>
        );
      }
    });
  };
  render() {
    let path = this.props.path;
    return (
      <Fragment>
        <h1 className="logo">
          <span></span>
        </h1>
        <Menu
          theme="dark"
          mode="inline"
          defaultSelectedKeys={[path]}
          defaultOpenKeys={[path]}
          style={{ height: "100%-83", borderRight: 0 }}
        >
          {this.getMenuList(menuList)}
        </Menu>
      </Fragment>
    );
  }
}
